<template>
    <header class="header">
        <h1>todos</h1>
        <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
        <label for="toggle-all"></label>
        <input class="new-todo" placeholder="输入任务名称-回车确认" autofocus @keyup.enter="addFn" v-model="msg" />
    </header>
</template>
  
<script>
export default {
    data() {
        return {
            msg: ''
        }
    },
    methods: {
        addFn() {
            if (this.msg.length === 0) {
                alert('输入不能为空')
                return
            }
            this.$emit('addList', this.msg)
            this.msg = ''
        },
    },
    computed: {
        isAll: {
            set(checked) {
                this.arr.forEach(obj => obj.isDone = checked)
            },
            get() {
                return this.arr.every(obj => obj.isDone === true)
            }
        }
    },
    props: ['arr']
}
</script>